<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ markdown文件名 }}</title>
    <!-- marked -->
    <script src="https://unpkg.com/marked@17.0.1/lib/marked.umd.js"></script>
    <!-- highlight.js -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/default.min.css"> -->
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
</head>
<body>
    <main class="main">
        <pre>
            <code>
{{ markdown内容|safe }}
            </code>
        </pre>
        <p id="md-url" style="text-align: right;display: none">
            原 Markdown 文件：<a href="#" id="md-url-a" target="_blank"></a>
        </p>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('pre>code').forEach((code) => {
                const pre = code.parentElement;
                const div = document.createElement('div');
                div.innerHTML = marked.parse(code.innerText);
                pre.replaceWith(div);
            });
            hljs.highlightAll();
        });
        const currentUrl = new URL(window.location);
        if (currentUrl.pathname.endsWith('.html')) {
            currentUrl.pathname = currentUrl.pathname.slice(0, -5) + '.md';
            const mdUrl = currentUrl.toString();
            const mdUrlA = document.getElementById('md-url-a');
            mdUrlA.href = mdUrl;
            mdUrlA.textContent = decodeURI(mdUrl);
            document.getElementById('md-url').style.display = 'block';
        }
    </script>
    <style>
:root {
    /* 🌞 浅色主题 */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 🌙 深色主题 */
        color-scheme: dark;
    }
}
/*
xkk1 Theme core CSS
Copyright (C) 2024  [xkk1](https://github.com/xkk1)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

:root {
    font-size: 16px;
    --title-font-size: 2.5rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.75rem;
    --h3-font-size: 1.5rem;
    --h4-font-size: 1.25rem;
    --h5-font-size: 1rem;
    --h6-font-size: 0.75rem;
    --p-font-size: 1rem;
    --broder-radius: 0.5rem;
    --code-font-size: 1rem;
    --code-font-family: "Fira Code", monospace;
    --font-family: "Resource Han Rounded CN", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans;
    --backdrop-filter: blur(0.125rem);
    /* --background-color-blur-white: rgba(255, 255, 255, 0.8);
    --background-color-blur-black: rgba(0, 0, 0, 0.8); */
}

:root {
    --color: #3b3b3b;
    --color-grey: #909090;
    --background-color: #f8f8f8;
    --background-color-grey: #e6e6e6;
    /* --box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25); */
    --box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.4);

    /* --background-color-blur: rgba(0, 0, 0, 0.4); */
    --background-color-blur: rgba(200, 200, 200, 0.4);
    --a-color: #005fb8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #ccc;
        --color-grey: #3c3c3c;
        --background-color: #181818;
        --background-color-grey: #242424;
        /* --box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.25); */
        --box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);

        --background-color-blur: rgba(66, 66, 66, 0.4);
        /* --background-color-blur: rgba(255, 255, 255, 0.4); */
        --a-color: #40a6ff;
    }
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    background-color: var(--background-color);
    font-family: var(--font-family);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.main {
    padding: 1rem;
    margin: 0 auto;
    max-width: 64rem;
    overflow-x: hidden;
    word-wrap: break-word;
    background-color: var(--background-color);
    border-radius: var(--broder-radius);
    /* box-shadow: var(--box-shadow); */
    font-family: var(--font-family);
    font-size: var(--p-font-size);
    color: var(--color);
}

.main .title,
.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
    margin: 2rem 0 1rem 0;
    padding: 0;
    /* font-family: var(--font-family); */
    font-weight: bold;
    line-height: 1;
}

.main :first-child {
    margin-top: 0;
}

.main :last-child {
    margin-bottom: 0;
}

.main .title {
    font-size: var(--title-font-size);
    text-align: center;
}

.main p {
    font-size: var(--p-font-size);
}

.main h1 {
    font-size: var(--h1-font-size);
}

.main h2 {
    font-size: var(--h2-font-size);
}

.main h3 {
    font-size: var(--h3-font-size);
}

.main h4 {
    font-size: var(--h4-font-size);
}

.main h5 {
    font-size: var(--h5-font-size);
}

.main h6 {
    font-size: var(--h6-font-size);
}

/* 引用 */
.main blockquote {
    margin: 1rem 0;
    padding: 1rem;
    border-left: 3px solid var(--color);
    background-color: var(--background-color-grey);
    border-radius: 0 var(--broder-radius) var(--broder-radius) 0;
}

/* 代码块 */
.main code {
    font-family: var(--code-font-family);
    font-size: var(--code-font-size);
    border-radius: var(--broder-radius);
    box-shadow: var(--box-shadow);
}

/* 图像 */
.main img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* 未解析的 Markdown */
.markdown {
    white-space: pre-wrap;
}

/* 代码 */
pre>code {
    height: 100%;
}

pre>div.tool-box {
    position: absolute;
    display: flex;
    opacity: 0;
    transition: opacity .2s;
    flex-direction: row;
    right: 0.5rem;
    top: 0.5rem;
    background-color: transparent;
    pointer-events: none;
}

pre>div.tool-box.show-tool-box {
    opacity: 1;
}

pre>div.tool-box>div {
    flex: 1;
    margin: 2px 4px;
    padding: 2px 4px;
    pointer-events: auto;
    cursor: pointer;
    font-family: var(--code-font-family);
    
    color: var(--color);
    backdrop-filter: var(--backdrop-filter);
    background-color: var(--background-color-blur);
    border-radius: var(--broder-radius);
}

pre>div.tool-box>div.copy-success::after {
    content: " ✔已复制";
}

pre.show-line-num {
    position: relative;
}

pre.show-line-num>code.hljs {
    padding-left: 3em;
}

pre.show-line-num>ol.line-num {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 0.5em 0 0;
    margin: 0.5em 0 0 0;
    width: 2em;
    list-style: none;
    text-align: right;
    border-right: 2px solid var(--color-grey);
    background-color: inherit;
    font-size: var(--code-font-size);
    font-family: var(--code-font-family);
    backdrop-filter: var(--backdrop-filter);
}

/* 表格 */
.main table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.main table thead {
    border-bottom: 1px solid var(--color);
    background: var(--background-color-grey);
}

.main th,
.main td {
    padding: 0.5em 1em;
    border: 1px solid var(--color);
    empty-cells: show;
}

.main th {
    font-weight: bold;
}

.main tbody tr:nth-child(2n) {
    background: var(--background-color-grey);
}

/* 链接 */
.main a {
    color: var(--a-color);
    text-decoration: none;
}

.main a:hover {
    text-decoration: underline;

}

/* 列表 */
.main ul,
.main ol {
    padding-left: 2.5em;
}

/* 按钮 */
.main button,
.main input[type="button"] {
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--color);
    border-radius: var(--broder-radius);
    background-color: var(--background-color-grey);
    color: var(--color);
    cursor: pointer;
}

/* 输入框 */
.main input[type="text"] {
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--color);
    border-radius: var(--broder-radius);
    background-color: var(--background-color);
    color: var(--color);
    cursor: text;
}
/*
vscode style for highlight.js (c) xkk1 <xiao.kuku@qq.com>
Copyright (C) 2024  [xkk1](https://github.com/xkk1)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

/* [data-theme="light"] */
:root {
    --hljs-color: #3B3B3B;
    --hljs-background-color: #FFFFFF;
    --hljs-selector-class-color: #800000;
    --hljs-attribute-color: #E50000;
    --hljs-attr-color: #0451A5;
    --hljs-string-color: #A31515;
    --hljs-number-color: #098658;
    --hljs-comment-color: #008000;
    --hljs-title-color: #795E26;
    --hljs-built_in-color: #795E26;
    --hljs-keyword-color: #AF00DB;
    --hljs-section-color: #800000;
    --hljs-tag-color: #800000;
    --hljs-name-color: #800000;
    --hljs-quote-color: #0451A5;
    --hljs-bullet-color: #0451A5;
    --hljs-type-color: #267F99;
    --hljs-variable-color: #001080;
    --hljs-meta-color: #0000FF;
    --hljs-subst-color: #0431FA;

    --hljs-attr-color-html: #E50000;
    --hljs-attr-color-xml: #E50000;
    --hljs-keyword-color-latex: #795E26;
    --hljs-built_in-color-latex: #AF00DB;
    --hljs-strong-color-markdown: #000080;
    --hljs-strong-emphasis-color-markdown: #000080;
    --hljs-keyword-color-java: #0000FF;
    --hljs-string-color-html: #0000FF;
    --hljs-string-color-xml: #0000FF;
    --hljs-title-class_-color: #267F99;


}

@media (prefers-color-scheme: dark) {
    :root {
        --hljs-color: #CCCCCC;
        --hljs-background-color: #1F1F1F;
        --hljs-selector-class-color: #D7BA7D;
        --hljs-attribute-color: #9CDCFE;
        --hljs-attr-color: #9CDCFE;
        --hljs-string-color: #CE9178;
        --hljs-number-color: #B5CEA8;
        --hljs-comment-color: #6A9955;
        --hljs-title-color: #DCDCAA;
        --hljs-built_in-color: #DCDCAA;
        --hljs-keyword-color: #C586C0;
        --hljs-section-color: #800000;
        --hljs-tag-color: #569CD6;
        --hljs-name-color: #569CD6;
        --hljs-quote-color: #6A9955;
        --hljs-bullet-color: #6796E6;
        --hljs-type-color: #569CD6;
        --hljs-variable-color: #9CDCFE;
        --hljs-meta-color: #C586C0;
        --hljs-subst-color: #569CD6;

        --hljs-strong-color-markdown: #569CD6;
        --hljs-strong-emphasis-color-markdown: #569CD6;
        --hljs-meta-color-latex: #6A9955;
        --hljs-title-class_-color: #4EC9B0;
        --hljs-type-color-java: #4EC9B0;
        --hljs-keyword-color-latex: #DCDCAA;
    }
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    white-space: pre;
    padding: 0.5em;
    color: var(--hljs-color);
    background-color: var(--hljs-background-color);
}

pre:has(code.hljs) {
    background-color: var(--hljs-background-color);
}

.hljs-selector-class {
    color: var(--hljs-selector-class-color);
}

.hljs-attribute {
    color: var(--hljs-attribute-color);
}

.hljs-attr {
    color: var(--hljs-attr-color);
}

.hljs-string {
    color: var(--hljs-string-color);
}

.hljs-number {
    color: var(--hljs-number-color);
}

.hljs-comment {
    color: var(--hljs-comment-color);
}

.hljs-title {
    color: var(--hljs-title-color);
}

.hljs-built_in {
    color: var(--hljs-built_in-color);
}

.hljs-keyword {
    color: var(--hljs-keyword-color);
}

.hljs-section {
    color: var(--hljs-section-color);
}

.hljs-tag {
    color: var(--hljs-tag-color);
}

.hljs-name {
    color: var(--hljs-name-color);
}


.hljs-quote {
    color: var(--hljs-quote-color);
}

.hljs-bullet {
    color: var(--hljs-quote-color);
}


.hljs-type {
    color: var(--hljs-type-color);
}

.hljs-variable {
    color: var(--hljs-variable-color);
}

.hljs-meta {
    color: var(--hljs-meta-color);
}

.hljs-subst {
    color: var(--hljs-subst-color);
}


.language-html .hljs-attr {
    color: var(--hljs-attr-color-html, var(--hljs-attr-color));
}

.language-xml .hljs-attr {
    color: var(--hljs-attr-color-xml, var(--hljs-attr-color));
}

.language-latex .hljs-keyword {
    color: var(--hljs-keyword-color-latex, var(--hljs-keyword-color));
}

.language-latex .hljs-built_in {
    color: var(--hljs-built_in-color-latex, var(--hljs-built_in-color));
}

.language-markdown .hljs-strong {
    color: var(--hljs-strong-color-markdown, var(--hljs-strong-color));
}

.language-markdown .hljs-strong .hljs-emphasis {
    color: var(--hljs-strong-emphasis-color-markdown, var(--hljs-strong-color));
}

.language-java .hljs-keyword {
    color: var(--hljs-keyword-color-java, var(--hljs-keyword-color));
}

.language-html .hljs-string {
    color: var(--hljs-string-color-html, var(--hljs-string-color));

}

.language-xml .hljs-string {
    color: var(--hljs-string-color-xml, var(--hljs-string-color));

}

.hljs-title.class_ {
    color: var(--hljs-title-class_-color, var(--hljs-title-color));
}

.language-latex .hljs-meta {
    color: var(--hljs-meta-color-latex, var(--hljs-meta-color));
}

.language-java .hljs-type {
    color: var(--hljs-type-color-java, var(--hljs-type-color));
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong,
.language-markdown .hljs-section {
    font-weight: bold;
}

.hljs-link {
    text-decoration: underline;
}
    </style>
</body>
</html>